<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星座探索 - 多样化展示</title>
    
    <!-- 引入所需的CDN文件 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    
    <style>
        :root {
            --aries: #e63946;
            --taurus: #4cc9f0;
            --gemini: #4895ef;
            --cancer: #f72585;
            --leo: #ffb703;
            --virgo: #4cc9f0;
            --libra: #7209b7;
            --scorpio: #3a0ca3;
            --sagittarius: #f72585;
            --capricorn: #4361ee;
            --aquarius: #38b000;
            --pisces: #4cc9f0;
            --light-bg: #f8f9fa;
            --dark-text: #212529;
            --light-text: #6c757d;
            --transition: all 0.3s ease;
        }
        
        body {
            background-color: #f0f4f8;
            color: var(--dark-text);
            font-family: 'Segoe UI', system-ui, sans-serif;
            line-height: 1.6;
        }
        
        .page-title {
            font-size: 2.2rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
            background: linear-gradient(90deg, var(--aries), var(--libra));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .section-heading {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            position: relative;
            padding-bottom: 0.5rem;
        }
        
        .section-heading::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 50px;
            height: 3px;
            border-radius: 3px;
        }
        
        /* 各星座主题色配置 */
        .aries-theme::after { background-color: var(--aries); }
        .taurus-theme::after { background-color: var(--taurus); }
        .gemini-theme::after { background-color: var(--gemini); }
        .cancer-theme::after { background-color: var(--cancer); }
        .leo-theme::after { background-color: var(--leo); }
        .virgo-theme::after { background-color: var(--virgo); }
        .libra-theme::after { background-color: var(--libra); }
        .scorpio-theme::after { background-color: var(--scorpio); }
        .sagittarius-theme::after { background-color: var(--sagittarius); }
        .capricorn-theme::after { background-color: var(--capricorn); }
        .aquarius-theme::after { background-color: var(--aquarius); }
        .pisces-theme::after { background-color: var(--pisces); }
        
        .card {
            border: none;
            border-radius: 12px;
            overflow: hidden;
            transition: var(--transition);
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 20px rgba(0,0,0,0.1);
        }
        
        /* 1. 横幅式星座展示 */
        .banner-zodiac {
            position: relative;
            height: 300px;
            margin-bottom: 2rem;
        }
        
        .banner-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(0.6);
        }
        
        .banner-content {
            position: relative;
            height: 100%;
            color: white;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
        }
        
        .banner-zodiac .zodiac-name {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .banner-zodiac .zodiac-symbol {
            font-size: 2.5rem;
        }
        
        .banner-zodiac .zodiac-date {
            background-color: rgba(255,255,255,0.2);
            color: white;
            display: inline-block;
            padding: 3px 12px;
            border-radius: 20px;
            margin-bottom: 1rem;
        }
        
        .banner-zodiac .zodiac-desc {
            max-width: 600px;
            margin-bottom: 1.5rem;
            text-shadow: 0 1px 3px rgba(0,0,0,0.3);
        }
        
        .banner-actions {
            display: flex;
            gap: 1rem;
        }
        
        /* 2. 网格式星座展示 */
        .grid-zodiacs {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .grid-card {
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }
        
        .grid-card .zodiac-image {
            height: 180px;
            width: 100%;
            object-fit: cover;
        }
        
        .grid-card .card-body {
            padding: 1.25rem;
        }
        
        .grid-card .zodiac-name {
            font-weight: 600;
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .grid-card .zodiac-date {
            font-size: 0.85rem;
            color: var(--light-text);
            margin-bottom: 0.75rem;
        }
        
        .grid-card .zodiac-traits {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-top: 1rem;
        }
        
        .trait-pill {
            font-size: 0.75rem;
            padding: 2px 10px;
            border-radius: 12px;
            background-color: #f1f5f9;
        }
        
        /* 3. 侧边图星座展示 */
        .side-image-zodiac {
            display: flex;
            margin-bottom: 2rem;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }
        
        .side-image {
            flex: 0 0 35%;
        }
        
        .side-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .side-content {
            flex: 1;
            padding: 1.75rem;
            display: flex;
            flex-direction: column;
        }
        
        .side-content .zodiac-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }
        
        .side-content .zodiac-name {
            font-size: 1.5rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .side-content .zodiac-symbol {
            font-size: 1.8rem;
        }
        
        .side-content .zodiac-date {
            color: var(--light-text);
            font-size: 0.9rem;
        }
        
        .side-content .zodiac-details {
            display: flex;
            gap: 2rem;
            margin-top: 1.5rem;
        }
        
        .detail-column {
            flex: 1;
        }
        
        .detail-title {
            font-weight: 600;
            margin-bottom: 0.75rem;
            font-size: 0.95rem;
            color: var(--light-text);
        }
        
        .compatibility-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .compatibility-item {
            font-size: 0.85rem;
            padding: 4px 10px;
            border-radius: 4px;
            background-color: #f1f5f9;
        }
        
        /* 4. 堆叠式星座展示 */
        .stacked-zodiac {
            margin-bottom: 2rem;
            position: relative;
            padding-left: 80px;
        }
        
        .stacked-icon {
            position: absolute;
            left: 0;
            top: 0;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2rem;
            color: white;
        }
        
        .stacked-content {
            background-color: white;
            padding: 1.25rem 1.5rem;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }
        
        .stacked-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 0.75rem;
        }
        
        .stacked-zodiac .zodiac-name {
            font-weight: 600;
            font-size: 1.1rem;
        }
        
        .stacked-zodiac .zodiac-horoscope {
            font-size: 0.95rem;
            color: var(--dark-text);
        }
        
        .stacked-actions {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
            font-size: 0.9rem;
            color: var(--light-text);
        }
        
        .stacked-action {
            display: flex;
            align-items: center;
            gap: 5px;
            cursor: pointer;
        }
        
        /* 5. 对比式星座展示 */
        .comparison-zodiac {
            display: flex;
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .comparison-card {
            flex: 1;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            position: relative;
            overflow: hidden;
        }
        
        .comparison-header {
            padding: 1rem;
            text-align: center;
        }
        
        .comparison-zodiac .zodiac-symbol {
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
        }
        
        .comparison-zodiac .zodiac-name {
            font-weight: 600;
            font-size: 1.2rem;
            margin-bottom: 0.25rem;
        }
        
        .comparison-zodiac .zodiac-date {
            font-size: 0.85rem;
            color: var(--light-text);
        }
        
        .comparison-body {
            padding: 1rem;
        }
        
        .comparison-title {
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: var(--light-text);
        }
        
        .attribute-bar {
            margin-bottom: 0.75rem;
        }
        
        .attribute-label {
            display: flex;
            justify-content: space-between;
            font-size: 0.85rem;
            margin-bottom: 4px;
        }
        
        .attribute-progress {
            height: 8px;
            background-color: #e9ecef;
            border-radius: 4px;
            overflow: hidden;
        }
        
        .attribute-value {
            height: 100%;
            border-radius: 4px;
        }
        
        .comparison-footer {
            padding: 1rem;
            text-align: center;
            border-top: 1px solid #f1f5f9;
            margin-top: 1rem;
        }
        
        .compatibility-score {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        
        .compatibility-text {
            font-size: 0.9rem;
            color: var(--light-text);
        }
        
        /* 按钮样式 */
        .btn-zodiac {
            padding: 8px 20px;
            border-radius: 6px;
            font-weight: 500;
            transition: var(--transition);
            border: none;
        }
        
        .btn-primary-zodiac {
            background-color: var(--primary);
            color: white;
        }
        
        .btn-outline-zodiac {
            background-color: transparent;
            color: var(--primary);
            border: 1px solid var(--primary);
        }
        
        /* 响应式调整 */
        @media (max-width: 992px) {
            .side-image-zodiac {
                flex-direction: column;
            }
            
            .side-image {
                flex: 0 0 200px;
            }
            
            .comparison-zodiac {
                flex-direction: column;
            }
        }
        
        @media (max-width: 768px) {
            .page-title {
                font-size: 1.8rem;
            }
            
            .banner-zodiac {
                height: 250px;
            }
            
            .banner-content {
                padding: 1.5rem;
            }
            
            .side-content .zodiac-details {
                flex-direction: column;
                gap: 1.5rem;
            }
            
            .stacked-zodiac {
                padding-left: 60px;
            }
            
            .stacked-icon {
                width: 50px;
                height: 50px;
                font-size: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <div class="container py-8">
        <!-- 页面标题 -->
        <div class="mb-8">
            <h1 class="page-title">星座探索</h1>
            <p class="text-muted">发现十二星座的奥秘，通过多种方式了解每个星座的独特魅力</p>
        </div>
        
        <!-- 1. 横幅式星座展示 -->
        <section class="mb-10">
            <h2 class="section-heading leo-theme">星座焦点</h2>
            
            <div class="banner-zodiac card">
                <img src="https://picsum.photos/1200/600?random=10" alt="狮子座背景" class="banner-bg">
                <div class="banner-content">
                    <div class="zodiac-name">
                        <span class="zodiac-symbol">♌</span>
                        狮子座
                    </div>
                    <span class="zodiac-date">7月23日 - 8月22日</span>
                    <p class="zodiac-desc">
                        狮子座是天生的领导者，充满自信与热情，喜欢成为众人瞩目的焦点。他们慷慨大方，有强烈的正义感，同时也有着骄傲的一面。狮子座的人如同太阳一般，散发着温暖与光芒，能够激励周围的人。
                    </p>
                    <div class="banner-actions">
                        <button class="btn-zodiac btn-primary-zodiac" style="--primary: var(--leo);">查看详情</button>
                        <button class="btn-zodiac btn-outline-zodiac" style="--primary: var(--leo);">关注星座</button>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 2. 网格式星座展示 -->
        <section class="mb-10">
            <h2 class="section-heading gemini-theme">星座速览</h2>
            
            <div class="grid-zodiacs">
                <!-- 网格卡片1 -->
                <div class="grid-card card aries">
                    <img src="https://picsum.photos/600/400?random=1" alt="白羊座" class="zodiac-image">
                    <div class="card-body">
                        <div class="zodiac-name">
                            <span class="zodiac-symbol">♈</span>
                            白羊座
                        </div>
                        <div class="zodiac-date">3月21日 - 4月19日</div>
                        <p class="card-text text-muted small">充满活力、热情洋溢，具有强烈的冒险精神和领导才能。</p>
                        <div class="zodiac-traits">
                            <span class="trait-pill" style="color: var(--aries); border: 1px solid var(--aries); background-color: rgba(230, 57, 70, 0.1);">热情</span>
                            <span class="trait-pill">勇敢</span>
                            <span class="trait-pill">果断</span>
                        </div>
                    </div>
                </div>
                
                <!-- 网格卡片2 -->
                <div class="grid-card card taurus">
                    <img src="https://picsum.photos/600/400?random=2" alt="金牛座" class="zodiac-image">
                    <div class="card-body">
                        <div class="zodiac-name">
                            <span class="zodiac-symbol">♉</span>
                            金牛座
                        </div>
                        <div class="zodiac-date">4月20日 - 5月20日</div>
                        <p class="card-text text-muted small">稳重踏实，追求安全感和物质享受，非常有耐心。</p>
                        <div class="zodiac-traits">
                            <span class="trait-pill" style="color: var(--taurus); border: 1px solid var(--taurus); background-color: rgba(76, 201, 240, 0.1);">稳重</span>
                            <span class="trait-pill">务实</span>
                            <span class="trait-pill">忠诚</span>
                        </div>
                    </div>
                </div>
                
                <!-- 网格卡片3 -->
                <div class="grid-card card gemini">
                    <img src="https://picsum.photos/600/400?random=3" alt="双子座" class="zodiac-image">
                    <div class="card-body">
                        <div class="zodiac-name">
                            <span class="zodiac-symbol">♊</span>
                            双子座
                        </div>
                        <div class="zodiac-date">5月21日 - 6月21日</div>
                        <p class="card-text text-muted small">聪明机智，善于言辞，适应能力强，对新鲜事物充满好奇。</p>
                        <div class="zodiac-traits">
                            <span class="trait-pill" style="color: var(--gemini); border: 1px solid var(--gemini); background-color: rgba(72, 149, 239, 0.1);">机智</span>
                            <span class="trait-pill">善变</span>
                            <span class="trait-pill">健谈</span>
                        </div>
                    </div>
                </div>
                
                <!-- 网格卡片4 -->
                <div class="grid-card card cancer">
                    <img src="https://picsum.photos/600/400?random=4" alt="巨蟹座" class="zodiac-image">
                    <div class="card-body">
                        <div class="zodiac-name">
                            <span class="zodiac-symbol">♋</span>
                            巨蟹座
                        </div>
                        <div class="zodiac-date">6月22日 - 7月22日</div>
                        <p class="card-text text-muted small">情感丰富，非常重视家庭，具有强烈的保护欲和直觉。</p>
                        <div class="zodiac-traits">
                            <span class="trait-pill" style="color: var(--cancer); border: 1px solid var(--cancer); background-color: rgba(247, 37, 133, 0.1);">敏感</span>
                            <span class="trait-pill">顾家</span>
                            <span class="trait-pill">直觉</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 3. 侧边图星座展示 -->
        <section class="mb-10">
            <h2 class="section-heading scorpio-theme">深度解析</h2>
            
            <div class="side-image-zodiac card">
                <div class="side-image">
                    <img src="https://picsum.photos/600/800?random=5" alt="天蝎座" class="zodiac-image">
                </div>
                <div class="side-content">
                    <div class="zodiac-header">
                        <div class="zodiac-name scorpio">
                            <span class="zodiac-symbol">♏</span>
                            天蝎座
                        </div>
                        <span class="zodiac-date">10月24日 - 11月22日</span>
                    </div>
                    
                    <p class="zodiac-description">
                        天蝎座以神秘和力量著称，他们深沉内敛，观察力敏锐，意志坚定。天蝎座的人情感丰富但不轻易表露，有着强烈的洞察力和直觉。他们爱恨分明，对自己认定的人和事会非常忠诚，但也可能因为被背叛而变得冷酷无情。
                    </p>
                    
                    <div class="zodiac-details">
                        <div class="detail-column">
                            <div class="detail-title">性格特点</div>
                            <ul class="list-unstyled text-sm">
                                <li><i class="fas fa-check text-success me-2"></i>洞察力强</li>
                                <li><i class="fas fa-check text-success me-2"></i>意志坚定</li>
                                <li><i class="fas fa-check text-success me-2"></i>忠诚专一</li>
                                <li><i class="fas fa-times text-danger me-2"></i>固执己见</li>
                                <li><i class="fas fa-times text-danger me-2"></i>报复心强</li>
                            </ul>
                        </div>
                        
                        <div class="detail-column">
                            <div class="detail-title">速配星座</div>
                            <div class="compatibility-list">
                                <span class="compatibility-item">巨蟹座</span>
                                <span class="compatibility-item">双鱼座</span>
                                <span class="compatibility-item">金牛座</span>
                                <span class="compatibility-item">处女座</span>
                            </div>
                            
                            <div class="detail-title mt-3">幸运元素</div>
                            <ul class="list-unstyled text-sm">
                                <li><strong>幸运色：</strong>深红色、黑色</li>
                                <li><strong>幸运数字：</strong>2、8、11</li>
                                <li><strong>幸运石：</strong>红宝石、黑玛瑙</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 4. 堆叠式星座展示 -->
        <section class="mb-10">
            <h2 class="section-heading aquarius-theme">今日运势</h2>
            
            <div class="stacked-zodiacs">
                <!-- 堆叠项1 -->
                <div class="stacked-zodiac mb-3">
                    <div class="stacked-icon" style="background-color: var(--aquarius);">
                        ♒
                    </div>
                    <div class="stacked-content">
                        <div class="stacked-header">
                            <div class="zodiac-name">水瓶座</div>
                            <div class="zodiac-date">1月20日 - 2月18日</div>
                        </div>
                        <p class="zodiac-horoscope">
                            今天你的思维特别活跃，适合进行创意工作或 brainstorming。社交方面可能会遇到有趣的新朋友，带来新的灵感和机会。财运一般，避免冲动消费。
                        </p>
                        <div class="stacked-actions">
                            <div class="stacked-action">
                                <i class="far fa-thumbs-up"></i> 幸运指数: 85%
                            </div>
                            <div class="stacked-action">
                                <i class="far fa-bookmark"></i> 收藏
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 堆叠项2 -->
                <div class="stacked-zodiac mb-3">
                    <div class="stacked-icon" style="background-color: var(--pisces);">
                        ♓
                    </div>
                    <div class="stacked-content">
                        <div class="stacked-header">
                            <div class="zodiac-name">双鱼座</div>
                            <div class="zodiac-date">2月19日 - 3月20日</div>
                        </div>
                        <p class="zodiac-horoscope">
                            情绪较为敏感的一天，容易受到周围环境影响。适合进行艺术创作或冥想放松。感情方面可能会有小波动，需要多沟通理解。健康方面注意休息，避免熬夜。
                        </p>
                        <div class="stacked-actions">
                            <div class="stacked-action">
                                <i class="far fa-thumbs-up"></i> 幸运指数: 65%
                            </div>
                            <div class="stacked-action">
                                <i class="far fa-bookmark"></i> 收藏
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 堆叠项3 -->
                <div class="stacked-zodiac">
                    <div class="stacked-icon" style="background-color: var(--aries);">
                        ♈
                    </div>
                    <div class="stacked-content">
                        <div class="stacked-header">
                            <div class="zodiac-name">白羊座</div>
                            <div class="zodiac-date">3月21日 - 4月19日</div>
                        </div>
                        <p class="zodiac-horoscope">
                            行动力强的一天，适合开展新项目或解决棘手问题。工作上可能会得到上级的认可，但要注意不要过于急躁，听取他人建议会更好。健康方面适合户外运动。
                        </p>
                        <div class="stacked-actions">
                            <div class="stacked-action">
                                <i class="far fa-thumbs-up"></i> 幸运指数: 90%
                            </div>
                            <div class="stacked-action">
                                <i class="far fa-bookmark"></i> 收藏
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 5. 对比式星座展示 -->
        <section>
            <h2 class="section-heading libra-theme">星座对比</h2>
            
            <div class="comparison-zodiac">
                <!-- 对比卡片1 -->
                <div class="comparison-card card libra">
                    <div class="comparison-header" style="background-color: rgba(114, 9, 183, 0.1);">
                        <div class="zodiac-symbol">♎</div>
                        <div class="zodiac-name">天秤座</div>
                        <div class="zodiac-date">9月23日 - 10月23日</div>
                    </div>
                    <div class="comparison-body">
                        <div class="comparison-title">性格特质</div>
                        
                        <div class="attribute-bar">
                            <div class="attribute-label">
                                <span>和谐性</span>
                                <span>95%</span>
                            </div>
                            <div class="attribute-progress">
                                <div class="attribute-value" style="width: 95%; background-color: var(--libra);"></div>
                            </div>
                        </div>
                        
                        <div class="attribute-bar">
                            <div class="attribute-label">
                                <span>决断力</span>
                                <span>50%</span>
                            </div>
                            <div class="attribute-progress">
                                <div class="attribute-value" style="width: 50%; background-color: var(--libra);"></div>
                            </div>
                        </div>
                        
                        <div class="attribute-bar">
                            <div class="attribute-label">
                                <span>社交性</span>
                                <span>90%</span>
                            </div>
                            <div class="attribute-progress">
                                <div class="attribute-value" style="width: 90%; background-color: var(--libra);"></div>
                            </div>
                        </div>
                        
                        <div class="attribute-bar">
                            <div class="attribute-label">
                                <span>固执性</span>
                                <span>40%</span>
                            </div>
                            <div class="attribute-progress">
                                <div class="attribute-value" style="width: 40%; background-color: var(--libra);"></div>
                            </div>
                        </div>
                        
                        <div class="comparison-footer">
                            <div class="compatibility-score" style="color: var(--libra);">82%</div>
                            <div class="compatibility-text">与下方星座匹配度</div>
                        </div>
                    </div>
                </div>
                
                <!-- 对比卡片2 -->
                <div class="comparison-card card aries">
                    <div class="comparison-header" style="background-color: rgba(230, 57, 70, 0.1);">
                        <div class="zodiac-symbol">♈</div>
                        <div class="zodiac-name">白羊座</div>
                        <div class="zodiac-date">3月21日 - 4月19日</div>
                    </div>
                    <div class="comparison-body">
                        <div class="comparison-title">性格特质</div>
                        
                        <div class="attribute-bar">
                            <div class="attribute-label">
                                <span>和谐性</span>
                                <span>60%</span>
                            </div>
                            <div class="attribute-progress">
                                <div class="attribute-value" style="width: 60%; background-color: var(--aries);"></div>
                            </div>
                        </div>
                        
                        <div class="attribute-bar">
                            <div class="attribute-label">
                                <span>决断力</span>
                                <span>90%</span>
                            </div>
                            <div class="attribute-progress">
                                <div class="attribute-value" style="width: 90%; background-color: var(--aries);"></div>
                            </div>
                        </div>
                        
                        <div class="attribute-bar">
                            <div class="attribute-label">
                                <span>社交性</span>
                                <span>75%</span>
                            </div>
                            <div class="attribute-progress">
                                <div class="attribute-value" style="width: 75%; background-color: var(--aries);"></div>
                            </div>
                        </div>
                        
                        <div class="attribute-bar">
                            <div class="attribute-label">
                                <span>固执性</span>
                                <span>80%</span>
                            </div>
                            <div class="attribute-progress">
                                <div class="attribute-value" style="width: 80%; background-color: var(--aries);"></div>
                            </div>
                        </div>
                        
                        <div class="comparison-footer">
                            <button class="btn-zodiac btn-primary-zodiac" style="--primary: var(--aries); width: 100%;">
                                查看详细配对分析
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script>
        // 交互功能：点赞、收藏等
        document.querySelectorAll('.stacked-action').forEach(action => {
            action.addEventListener('click', function() {
                const icon = this.querySelector('i');
                
                if (icon.classList.contains('far')) {
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    if (icon.classList.contains('fa-bookmark')) {
                        icon.style.color = 'var(--libra)';
                        showToast('已收藏');
                    }
                } else {
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    if (icon.classList.contains('fa-bookmark')) {
                        icon.style.color = '';
                        showToast('已取消收藏');
                    }
                }
            });
        });
        
        // 按钮交互效果
        document.querySelectorAll('.btn-zodiac').forEach(btn => {
            btn.addEventListener('click', function() {
                const text = this.textContent.trim();
                if (text.includes('关注')) {
                    this.textContent = '已关注';
                    this.classList.remove('btn-outline-zodiac');
                    this.classList.add('btn-primary-zodiac');
                    showToast('已关注该星座');
                } else if (text.includes('查看详情')) {
                    const zodiacName = this.closest('.banner-content').querySelector('.zodiac-name').textContent.trim();
                    showToast(`正在加载${zodiacName}的详细信息...`);
                } else if (text.includes('查看详细配对分析')) {
                    showToast('正在加载星座配对详细分析...');
                }
            });
        });
        
  
    </script>
</body>
</html>
    
